<template>
    <a-drawer :title="title" :width="500" @close="handleCancel" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <!-- 登录账号 -->
            <a-form-model-item label="等级顺序" prop="sort" ref="sort">

                <a-input-number
                        style="width: 100%" :min="1" :max="999"
                        :placeholder="placeholder.sort" v-model="form.sort" :disabled="isUpdate"
                />


            </a-form-model-item>
            <a-form-model-item label="等级名称" prop="name" ref="name">
                <a-input :placeholder="placeholder.name" v-model="form.name"/>
            </a-form-model-item>

            <a-form-model-item label="晋级模式" prop="entryType" ref="entryType">

                <a-select :placeholder="placeholder.entryType" allowClear showSearch v-model="form.entryType">
                    <a-select-option v-for="(item, index) in VipRankUpTypeOPT" :key="index" :value="item.value">{{
                        item.label }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>


            <a-form-model-item label="晋级分值" prop="entryScore" ref="entryScore">
                <a-input-number
                        style="width: 100%"
                        :placeholder="placeholder.entryScore" v-model="form.entryScore"
                />

            </a-form-model-item>

            <a-form-model-item label="备注" prop="remark" ref="remark">
                <a-textarea :placeholder="placeholder.remark" :rows="4"
                            v-model="form.remark"
                />
            </a-form-model-item>
        </a-form-model>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import {rankAdd, rankUpdate} from '../public/http.js';
    import {dictLoad} from '../../../util/internal.api';

    export default {
        props: ['editRecord'],
        data() {
            return {
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '新增会员等级',
                visible: true, //modal 显示状态
                labelCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 5
                    }
                },
                wrapperCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 16
                    }
                },
                VipRankUpTypeOPT: [], //会员等级属性字段选项

                placeholder: {
                    sort: '请设置等级顺序',
                    name: '会员等级名称',
                    entryType: "请设置晋级模式",
                    entryScore: "请设置晋级分值",
                    remark: '会员等级备注',


                },
                form: {
                    sort: null,
                    name: "",

                    remark: null
                },
                rules: {


                    name: [
                        {
                            required: true,
                            message: '请设置会员等级名称',
                            trigger: 'blur'
                        },
                        {
                            max: 50,
                            message: '会员等级名称最多设置50个字符',
                            trigger: 'blur'
                        }
                    ],

                    entryType: {
                        required: true,
                        message: '请选择晋级模式',
                        trigger: 'blur'
                    },
                    entryScore: [{
                        required: true,
                        message: '请选择晋级模式',
                        trigger: 'blur'
                    },

                        {
                            type: "number",
                            message: '晋级分数值值允许为数字格式',
                            trigger: 'blur'
                        },

                    ],


                    sort: [
                        {
                            required: true,
                            type: "number",
                            message: '请设置会员等级顺序',
                            trigger: 'blur'
                        },


                        //自定义方法一个
                        {
                            validator: (rule, value, callback) => {
                                if (value < 0 || value >= 1000) {
                                    callback(new Error('等级顺序值请设置为1~999之间的整数!'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur'
                        }
                    ],
                    remark: [
                        {
                            required: false,
                            max: 100,
                            message: '备注信息请设置在100个字符以内',
                            trigger: 'blur'
                        }
                    ]
                },

            };
        },
        methods: {
            //多选菜单
            onChange(checkedValues) {
                this.form.roleArr = checkedValues;
            },
            //表单提交事件
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        if (this.isUpdate) {
                            rankUpdate(this.form.id, this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });

                        } else {
                            rankAdd(this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        }
                    }
                });
            },


            //关闭弹窗
            handleCancel(render = false) {
                this.visible = false;
                this.$emit('closeFun', {render: render});
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑会员等级';
                }
            },
            //数据初始化
            async init() {
                await dictLoad("VipRankUpType").then(res => this.VipRankUpTypeOPT = res);
                this.fromVal();

            }
        },
        created() {
            this.init();
        }
    };
</script>
